<!--用车申请-->
<template>
  <div id="Apply">
    <Header
    title="异地申请"
    />
    <div class="container">
     <van-form @submit="onSubmit">
       <div  class="module">
         <div  class="module-title">
              <span class="title-icon base-icon"></span>
              <span class="tittle-text">基本信息</span>
         </div>  
       
        <div  class="form-box">
         
           <van-field
             readonly
             clickable
              name="picker"
              v-model="apply_fwzx"
              label="保障单位"
              placeholder="请选择保障单位"
              @click="showPickerAction('fwzx')"
            />
             <van-field
                readonly
                v-model="yong_che_dw"
                name="用车单位"
                label="用车单位"
                placeholder="请填写用车单位"
                :rules="[{ required: true, message: '请填写用车单位' }]"
            />
            <van-field
                v-if="conf.user_name==1"
                v-model="yong_che_ren"
                name="用车人"
                label="用车人"
                placeholder="请填写用车人"
                :rules="[{ required: true, message: '请填写用用车人' }]"
            />
            <van-field

                v-if="conf.user_phone==1"
                v-model="apply_use_phone"
                name="用车人电话"
                label="用车人电话"
                placeholder="请填写用车人电话"
                :rules="[{ required: true, message: '请填写用车人电话' }]"
            />
            <van-field
                v-if="conf.user_duanhao==1"
                v-model="apply_duanhao"
                name="用车短号"
                label="用车短号"
                placeholder="请填写用车短号"
                :rules="[{ required: true, message: '请填写用车短号' }]"
            />
              <van-field
                v-if="conf.suixing_name==1"
                v-model="sui_xing_name"
                name="随行人名字"
                label="随行人名字"
                placeholder="请填写随行人名字"
                :rules="[{ required: true, message: '请填写随行人名字' }]"
            />
             <van-field
                v-if="conf.suixing_phone==1"
                v-model="sui_xing_phone"
                name="随行人电话"
                label="随行人电话"
                placeholder="请填写随行人电话"
                :rules="[{ required: true, message: '请填写随行人电话' }]"
            />
                          
           <van-field
                v-if="conf.suixing_duanhao==1"
                v-model="sui_xing_call"
                name="随行人短号"
                label="随行人短号"
                placeholder="请填写随行人短号字"
                :rules="[{ required: true, message: '请填写随行人短号字' }]"
            />        
         
            <van-field
              v-model="yong_che_xz"
              clickable
              name="picker"
              label="用车性质"
              placeholder="请选择用车性质"
              @click="showPickerAction('xz')"
            />
            <van-field
              v-model="yong_che_qy"
              clickable
              name="picker"
              label="用车区域"
              placeholder="请选择用用车区域"
              @click="showPickerAction('qys')"
            />
           
            <van-field
                v-model="apply_use_address"
                name="出发地"
                label="出发地"
                placeholder="请填写出发地"
                :rules="[{ required: true, message: '请填写出发地' }]"
            />
            <van-field
                v-model="apply_destination"
                name="目的地"
                label="目的地"
                placeholder="请填写目的地"
                :rules="[{ required: true, message: '请填写目的地' }]"
            />
            
            <van-field
              readonly
              clickable
              name="datetimePicker"
               v-model="apply_use_time"
              label="预计出发时间"
              placeholder="请选择预计出发时间"
              @click="showDatePickerAction('userTime')"
            />
            <van-field
              readonly
              clickable
              name="datetimePicker"
              v-model="apply_back_time"
              label="预计归队时间"
              placeholder="请选择预计归队时间"
              @click="showDatePickerAction('backTime')"
            />
           <van-field
              v-model="apply_fwzx"
              clickable
              name="picker"
              label="服务中心"
              placeholder="请选择用服务中心"
              @click="showPickerAction('fwzx')"
            />
           
             <van-field
                v-model="apply_remark"
                name="用车事由"
                label="用车事由"
                placeholder="请填写用车事由"
                :rules="[{ required: true, message: '请填写用车事由' }]"
            />
             <van-field
                v-model="apply_bz"
                name="备注"
                label="备注"
                placeholder="请填写备注"
                :rules="[{ required: true, message: '请填写备注' }]"
            />
        

        </div>
      </div> 
      <div  class="module">
         <div  class="module-title">
              <span class="title-icon cart-icon"></span>
              <span class="tittle-text">用车类型</span>
         </div>  
       
        <div  class="form-box">
             <van-field
                v-model="apply_man_num"
                name="乘车人数"
                label="乘车人数"
                type="number"
                placeholder="请填写乘车人数"
                :rules="[{ required: true, message: '请填写乘车人数' }]"
             />
          <van-field v-for="(item, index) in carTypes" :key="item.message" name="stepper" :label="item.value">
            <template #input>
              <van-stepper :min="0" @change="stepperAction(index)" v-model="item.number" />
            </template>
          </van-field>
        </div>

      </div>
    
   </van-form>
     <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                ref="pickerText"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
    </van-popup>
     <van-popup v-model="showDatePicker" position="bottom">
           <van-datetime-picker
              type="datetime"
               value="currentDate"
              @confirm="datePickerConfirm"
           />
    </van-popup>


  
    </div>
     <div class="buttom">
       <van-button  @click="postData" type="primary"   size="large" color="#3A73F6">提交</van-button>
       <van-button  @click="resetData" type="primary" size="large" color="#FE9729">重置</van-button>
    </div>
    <van-overlay :show="showOverlay" z-index="99999"> 
          <div class="overlay-box">
             <van-loading color="#1989fa" />
          </div>
    </van-overlay> 

 </div>
</template>

<script>
import {Toast} from 'vant';
import  Header from '../../components/Header'
import {dateFormat,timeCompare} from '../../util/date.js'
export default {
  name: 'Apply',
  data() {
    return {
       value: '',
       columns:[],
       showPicker: false,
       yong_che_ren:"",
       apply_use_phone:"",
       apply_duanhao:"",
       sui_xing_name:"",
       sui_xing_phone:"",
       sui_xing_call:"",
       apply_man_num:"",
       yong_che_qy:'',
       apply_qy_id:"",
       apply_sx_pople:"",
       apply_use_address:"",
       apply_destination:"",
       yong_che_xz:"",
       apply_use_time:"",
       apply_back_time:"",
       apply_fwzx_id:"",
       apply_fwzx:"",
       yong_che_dw:"",
       yong_che_dw_id:"",
       apply_remark:"",
       apply_bz:"",
       xz:[],
       qys:[],
       selectType:'xz',
       selectDateType:'userTime',
       qysObj:[],
       fwzxObj:[],
       fwzx:[],
       showDatePicker:false,
       carTypes:[],
       cartNum:1,
       conf:{},
       showOverlay:false
    };
  },
  mounted(){
     this.getData()
  },
   
  methods: {
    //数据重置
    resetData(){
      this.apply_back_time=""
      this.apply_bz=""
      this.apply_destination=""
      this.apply_fwzx_id=""
      this.apply_man_num=""
      this.apply_qy_id=""
      this.yong_che_qy=""
      this.apply_remark=""
      this.apply_sx_pople=""
      this.apply_use_address=""
      this.apply_use_phone=""
      this.apply_use_time=""
      this.yong_che_ren=""
      this.yong_che_xz=""
      this.apply_fwzx=""
      this.apply_duanhao=""
      this.sui_xing_phone=""
      this.sui_xing_call=""
      this.sui_xing_name=""
      this.carTypes.map((item)=>{
         item.number=0
         
      })
    },
    //车辆选择
    stepperAction(i){
      console.log(i)
       
     this.carTypes.map((item)=>{
        
          if(item.number>0){
             this.apply_sx_pople=item.value+"_"+item.number
          }
       })
    },
    showDatePickerAction(type){
      this.selectDateType=type
      this.showDatePicker=true
    },
    
    //时间选择
    datePickerConfirm(event){
       console.log(event) 
      
       switch(this.selectDateType){
         case "userTime":
            this.apply_use_time=dateFormat(event,"YYYY-mm-dd HH:MM")
          break;
        case "backTime":
            this.apply_back_time=dateFormat(event,"YYYY-mm-dd HH:MM")
         break;
       }
       if(this.apply_back_time!=""&&this.apply_use_time!=""&&timeCompare(this.apply_back_time,this.apply_use_time)){
            Toast("预计归队时间不能小于预计出发时间")
             if(this.selectDateType=="userTime"){
                this.apply_use_time=""
             }
              if(this.selectDateType=="backTime"){
                this.apply_back_time=""
             }
       }
      
       this.showDatePicker=false
    },
    //选择面板
    showPickerAction(type){
       console.log()
       this.showPicker=true
       switch(type){
         case "xz":
           this.columns=this.xz
           break;
         case "qys":
           this.columns=this.qys
           break;
          case "fwzx":
           this.columns=this.fwzx
           break;
       }
      this.selectType=type
    },
    //获取申请基础数据
    getData(){
          this.$http.get("/carorder/initApplyView?applyType=1")
          .then(result=>{
            if(result.code==200){
             result=result.data
             
            this.xz=result.xz
            this.qysObj=result.qys
            this.yong_che_dw=result.info.deptName
            this.yong_che_dw_id=result.info.deptId
            this.conf=result.conf
            //用车区域
            this.qys=result.qys.map((item)=>{
              return item.item_name
            })
            //服务中心
            this.fwzxObj=result.centers
            this.fwzx=result.centers.map((item)=>{
              return item.name
            })
            //车型列表
            this.carTypes=result.carTypes.map((item)=>{
                return   {
                  value:item,
                  number:0,
                
                }
            })
           }
       })

    },
   //选择面板确认面板
   onConfirm(value) {

     console.log("---",this.$refs.pickerText.getIndexes())
      console.log(value)
     
     this.value = value;
      console.log(event)
      this.showPicker = false;
       switch(this.selectType){
         case "xz":
          this.yong_che_xz=value
          break;
        case "qys":
           this.apply_qy_id=this.qysObj[this.$refs.pickerText.getIndexes()[0]]["id"]
           this.yong_che_qy=value
           break;
     
       case "fwzx":
           this.apply_fwzx_id=this.fwzxObj[this.$refs.pickerText.getIndexes()[0]]["id"]
           this.apply_fwzx=value
           break;
       }
    },
    //提交数据
    postData(){
      let params={}
      if(this.yong_che_ren!=""){
         params.yong_che_ren=this.yong_che_ren
      }
      if(this.apply_use_phone!=""){
         params.apply_use_phone=this.apply_use_phone
      }
      if(this.apply_duanhao!=""){
         params.apply_duanhao=this.apply_duanhao
      }
      if(this.sui_xing_name!=""){
         params.sui_xing_name=this.sui_xing_name
      }

      if(this.sui_xing_phone!=""){
         params.sui_xing_phone=this.sui_xing_phone
      }

       if(this.sui_xing_call!=""){
         params.sui_xing_call=this.sui_xing_call
      }

       if(this.apply_man_num!=""){
         params.apply_man_num=this.apply_man_num
      }

     if(this.apply_qy_id!=""){
         params.apply_qy_id=this.apply_qy_id
      }
     if(this.apply_sx_pople!=""){
         params.apply_sx_pople=this.apply_sx_pople
        

      }else{
         Toast("请选择用车数量")
         return 
      }

       if(this.apply_use_address!=""){
         params.apply_use_address=this.apply_use_address
      }
      

      if(this.apply_destination!=""){
         params.apply_destination=this.apply_destination
      }

     if(this.yong_che_xz!=""){
         params.yong_che_xz=this.yong_che_xz
      }
      if(this.apply_use_time!=""){
         params.apply_use_time=this.apply_use_time
      }

      if(this.apply_back_time!=""){
         params.apply_back_time=this.apply_back_time
      }

      if(this.apply_fwzx_id!=""){
         params.apply_fwzx_id=this.apply_fwzx_id
      }

      if(this.apply_remark!=""){
         params.apply_remark=this.apply_remark
      }
      if(this.apply_bz!=""){
         params.apply_bz=this.apply_bz
      }
      
      console.log(params)
      this.showOverlay=true
       this.$http.post("/carorder/insertApply",params)
       .then(result=>{
           this.showOverlay=false
           Toast(result.message)
       }).catch(()=>{
         this.showOverlay=false
       })


    }
  },
  components: {
   "Header":Header
  }
}
</script>

<style scoped>


.module-title{
 margin-bottom: 15px;
}
.form-box{
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}
.container{
   padding: 20px 20px 140px 20px;
 
  background-color: #f2f2f2;
}
.title-icon{
  height: 36px;
  width: 36px;
}
.cart-icon{
  background-image: url('./images/d_icon.png');
}
.base-icon{
    background-image: url('./images/d_icon.png');
}
.buttom{
  padding: 0 60px;
  height: 140px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-around;
  background: #ffffff;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.buttom .van-button--large{
    height: 40px;
    width: 100px;
    line-height: 40px;
}
.overlay-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
